<template>
  <div style="width:80%;margin-left:10%">
    <Row>
      <Col span="20">.</Col>
      <Col span="4"><Button type="primary"
              @click="showModal = true">创建学院</Button></Col>
    </Row>

    <Table :columns="columns7"
           :data="data6"></Table>

    <Modal v-model="showModal"
           title="新建学院"
           @on-ok="handleCreate"
           @on-cancel="handleCancel">
      <Row>
        <Col span="12">请输入管理员名字</Col>
        <Col span="12"><Input v-model="admin"
               placeholder="admin"
               clearable
               style="width: 200px" /></Col>
      </Row>
      <Row>
        <Col span="12">请输入学院名</Col>
        <Col span="12"><Input v-model="academy"
               placeholder="academy"
               clearable
               style="width: 200px" /></Col>
      </Row>
      <Row>
        <Col span="12">请输入管理员的默认密码</Col>
        <Col span="12"><Input v-model="password"
               placeholder="password"
               clearable
               style="width: 200px" /></Col>
      </Row>
    </Modal>
  </div>
</template>


<script>
export default {
  data() {
    return {
      admin: "",
      academy: "",
      password: "",
      showModal: false,
      columns7: [
        {
          title: "管理员",
          key: "admin",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.admin)
            ]);
          }
        },
        {
          title: "所属学院",
          key: "academy"
        },
        {
          title: "密码",
          key: "password"
        },
        {
          title: "管理",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          admin: "aaa",
          academy: "aa",
          password: "aa"
        }
      ]
    };
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `admin：${this.data6[index].admin}<br>academy：${
          this.data6[index].academy
        }<br>password：${this.data6[index].password}`
      });
    },
    remove(index) {
      this.$Modal.confirm({
        title: "是否删除所选内容",
        content: "<p>点击确定进行删除,将删除对应学院的所有数据</p>",
        onOk: () => {
          this.handleDelete(index);
        },
        onCancel: () => {
          this.$Message.info("删除已取消");
        }
      });
    },
    handleDelete(index) {
      let url = "/academy/delete";
      this.$axios
        .post(
          url,
          {
            id: this.data6[index].id
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          this.data6.splice(index, 1);
          this.$Message.info("删除成功");
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("服务器繁忙");
        });
    },
    handleCreate() {
      let url = "/academy/create";
      this.$axios
        .post(
          url,
          {
            admin: this.admin,
            password: this.password,
            academy: this.academy,
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          this.$Message.info("创建成功");
          this.clearModal()
          this.getAcademyList()
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("服务器繁忙");
        });
    },
    handleCancel() {
      this.$Message.info("Clicked cancel");
    },
    clearModal(){
      this.admin = ""
      this.academy = ""
      this.password = ""
    },
    getAcademyList() {
      let url = "/academy/list";
      axios({
        method: "post",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
          this.data6 = response.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getAcademyList();
  }
};
</script>


<style scoped>
.modal_font {
  font-size: 30px;
}
</style>